<template>
  <div id="body">
    <el-container>
      <!-- 头部导航栏组件 -->
      <el-header>
        <Index @ee="logout()"></Index>
      </el-header>

      <!-- 左侧边栏 -->

      <el-container class="newbackground" >
        <el-container>
          <el-main>
            <el-row >
             
                <div id="allmap">
                  <el-row id="row1">
                    <el-col :span="6">
                      <el-button  icon="el-icon-search" ><nuxt-link class="fontstyle" to="/systemoverview/systemstructure">系统总览</nuxt-link></el-button>
                    </el-col :span="6">
                    <el-col :span="6">
                      <el-button  icon="el-icon-monitor" ><nuxt-link class="fontstyle" to="/operationmonitoring/runcontroller">运行控制</nuxt-link></el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button  icon="el-icon-search" ><nuxt-link class="fontstyle" to="/energymanagement/powerforecasting">能源管理</nuxt-link></el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button  icon="el-icon-user"><nuxt-link class="fontstyle" to="/comprehensiveanalysis/energyconsumptionanalysis">综合分析</nuxt-link></el-button>
                    </el-col>
                  </el-row>
                  <el-row id="row2">
                    <el-col :span="6">
                      <el-button icon="el-icon-picture-outline-round"><nuxt-link class="fontstyle" to="/comprehensiveanalysis/enrgyefficiencyanalysis">能效分析</nuxt-link></el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button  icon="el-icon-setting"><nuxt-link class="fontstyle" to="/comprehensiveanalysis/coulometry">功率分析</nuxt-link></el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button icon="el-icon-s-operation" ><nuxt-link class="fontstyle" to="/systemoverview/operationparameters">数据监测</nuxt-link></el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button  icon="el-icon-film"><nuxt-link class="fontstyle" to="/systemoverview/powercurve">功率监测</nuxt-link></el-button>
                    </el-col>
                  </el-row>
                </div>
             <!-- <button @click="test()">测试按钮</button> -->
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <!-- 底部导航栏 -->
      <!-- <el-footer> -->
      <!-- 底部组件 -->
     
      <!-- </el-footer> -->
    </el-container>
     <Bottom></Bottom>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'

import Index from '~/components/index2'
import Bottom from '~/components/bottom'

export default {
  data() {
    return {
      radius: 3000,

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '1',

      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  created() {},

  mounted() {
    let this_ = this
    
    let b=document.getElementById("body")
    //设置每15分钟自动刷新
    // this.timer = setInterval(() => {
    //   this.test()
    //   console.log("15分钟到了，执行自动刷新") // 修改数据date
    // }, 300000)
    b.style.height=window.innerHeight+'px'
    // setInterval(function(){
    //  document.getElementById("buttonid").click(this.openweb());
    //   console.log("执行循环")
    // },3000)
    // console.log(window.innerHeight)
    // console.log(document.body.clientHeight)
    // console.log(document.body.offsetHeight)
    // console.log(document.body.scrollHeight)
    // console.log(window.screen.height)
    // console.log(window.screen.availHeight)
    // this.finddata()
  
    
  },

  methods: {
   
     test() {
     
      this.$axios({
        headers: {
          Authorization: ' ',
          'content-Type': 'application/json;charset=UTF-8'
          //  Accept: 'application/json;charset=UTF-8'
        },
        method: 'get',
        url: 'http://127.0.0.1:8082/calculated/calculateddata',
        
      }).then(res => {
       
      
      })
    },
    addtest() {
      let user = this.$qs.parse(
        //  {"DevType":"立式风机","DevSerialNumber":"立式风机","逆变A过流":"","逆变B过流":"","逆变C过流":"","直流母线过压":"","过温":"","逆变IPM保护":"","A相过流":""}
          {"DevType":"立式风机","DevSerialNumber":"立式风机"}
      )
      this.$axios({
        headers: {
          Authorization: ' ',
          // 'content-Type': 'application/json;charset=UTF-8'
          //  Accept: 'application/json;charset=UTF-8'
        },
        method: 'post',
        url: 'http://127.0.0.1:8082/acceptdata/searchall',
        data: user
      }).then(res => {
       
        console.log(res.data)
      })
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    },
    //退出的功能实现原理：基于token的方式实现退出比较简单，只需要销毁本地token即可。这样，后续的请求
    //就不会携带token,必须重新登录生成一个新的token后才可以访问页面
    //退出登陆
    // init(){
    //     let this_ = this;
    //     this.$http.post("/oilWell/zheng").then(function(respon){
    //                    let j=0;
    //                    let q=0;
    //                    this_.onlinenumber=0;
    //                    this_.offlinenumber=0;
    //                    this_.totalnumber=0;
    //                    this_.$forceUpdate();
    //           for(let i=0;i<respon.data.length;i++){
    //                     if(respon.data[i].status=="online"){
    //                               this_.onlinenumber++;

    //                     }else if(respon.data[i].status=="offline"){
    //                               this_.offlinenumber++;

    //                     };
    //                     this_.totalnumber=this_.onlinenumber+this_.offlinenumber;

    //              }

    //             this_.offline=respon.data;

    //             //判断离线或者在线的车辆

    //       }).catch(function(error){
    //         // alert("请求数据出错！");
    //       });

    //    this.$http.post("/oilWell/biao").then(function(respon){
    //            for(let i=0;i<respon.data.length;i++){

    //                  //将后台传过来的字符串类型转换为数值型，否则无法计算
    //                  let lat=parseFloat(respon.data[i].latitude);
    //                  let lon=parseFloat(respon.data[i].longitude);

    //                   let res=this_.wgs2bd(lat,lon);

    //                   respon.data[i].latitude=res[0];
    //                   respon.data[i].longitude=res[1];

    //            };

    //            let j=0;
    //            let q=0;
    //           for(let i=0;i<respon.data.length;i++){

    //               // respon.data[i].showFlag=false;

    //               if(parseInt(respon.data[i].SOC)<30){

    //                     this_.list1[j]=respon.data[i];

    //                     j++;

    //               }
    //             }
    //                 this_.list=this_.list1;
    //                 // this_.offlinelist=respon.data;
    //                 this_.online=respon.data;

    //               for(let i=0;i<this_.online.length;i++){

    //            if(this_.online[i].device_id==this_.offline[i].device_id){

    //                   this_.online[i].status=this_.offline[i].status;

    //                   // this.$set( this_.online[i],'status',this_.offline[i].status)

    //            }
    //           };

    //             this_.$forceUpdate();
    //             // this_.online.forEach(item=>{
    //             //   alert("跟新后的状态值"+item.status)
    //             // })

    //             //判断车辆是否在线的功能
    //               let r=0;
    //               let t=0;
    //       for(let i=0;i<this_.online.length;i++){

    //            if(this_.online[i].status=="online"){
    //                   this_.onlinelist[r]=this_.online[i];
    //                   r++;
    //            }else{
    //               this_.offlinelist[t]=this_.online[i];
    //                   t++
    //            }
    //       };

    //       }).catch(function(error){
    //         // alert("请求数据出错！");
    //       });

    // },

    logout() {
      console.log("退出登陆")
      window.sessionStorage.clear()
      this.$router.push('/login/login')
    },
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath)
    // },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },

    searchall() {
      this.init()
    }
  }
}
</script>
<style lang="scss" scoped>
#body{
  // height:100%;
}
.el-container{
  height:100%;
}
.el-main{
  height:100%;
}
.el-row{
  height:100%;
}
#allmap {
  height: 550px;
  // height: 60%;
  background-image: url(../assets/images/timg2.jpg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  
  margin-left: 9%;
  margin-right: 9%;
  margin-top:4.5%;
  padding-top:8%;
}
#row1{
margin-top:0px;
// padding-top:9%;
padding-left:7.5%;
height:50%;
}
#row2{
// margin-top:6.5%;
padding-left:7.5%;
height:50%;
}
.el-col{
  height:100%;
}
.newbackground {
  background-image: url(../assets/images/新UI13.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
 
}
.fontstyle{
 font-size:2.7rem;
 color:white;
  text-decoration: none;
}
.fontstyle:hover{
 font-size:3rem;
 text-decoration: none;
 color:#EAE818;
}
.el-button{
  width:68%;
  height:124px;;
  font-size:2rem;
  background-image: url(../assets/images/科技感按钮3.jpg);
  background-repeat:no-repeat;
  //设置任意形状的div方块
  clip-path: polygon(10% 0, 91% 0, 100% 18%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 17%);
  background-size:100%;
}
.el-button:hover{
  width:85%;
  height:56%;
 
  font-size:2.5rem;
  
  color:#EAE818;
  background-image: url(../assets/images/科技感按钮12.jpg);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.el-image {
  margin-left: 3%;
}






</style>
